<template>
	<div class="dictionary">
		<div class="dicBtnGroup">
			<Button type="primary" class="large" @click="AddForumModal=true" style="padding:0 40px;">新增数据字典</Button>
			<Modal v-model="AddForumModal" title="新增版块" @on-ok="createForum" @on-cancel="cancel">
				<Form :label-width="110">
					<FormItem label="父项名称">
						<Select v-model="name">
							<Option v-for="(item, index) in nameList" :value="item" :key="index">{{ item }}</Option>
						</Select>
					</FormItem>
					<FormItem label="子项名称">
						<Input type="text" v-model="itemName" placeholder="请输入子项名称"></Input>
					</FormItem>
					<FormItem label="子项数值">
						<Input type="text" v-model="itemValue" placeholder="请输子项数值"></Input>
					</FormItem>
					<FormItem label="序号">
						<Input type="text" v-model="seq" placeholder="请输入序号"></Input>
					</FormItem>
				</Form>
			</Modal>
			<Modal v-model="editForumModal" title="修改版块" @on-ok="editForum" @on-cancel="cancel">
				<Form :label-width="110">
					<FormItem label="父项名称">
						<Select v-model="editName">
							<Option v-for="(item, index) in nameList" :value="item" :key="index">{{ item }}</Option>
						</Select>
					</FormItem>
					<FormItem label="子项名称">
						<Input type="text" v-model="editItemName" placeholder="请输入子项名称"></Input>
					</FormItem>
					<FormItem label="子项数值">
						<Input type="text" v-model="editItemValue" placeholder="请输子项数值"></Input>
					</FormItem>
					<FormItem label="序号">
						<Input type="text" v-model="editSeq" placeholder="请输入序号"></Input>
					</FormItem>
				</Form>
			</Modal>
			<Modal v-model="deleteForumModal" title="删除版块" @on-ok="deleteForum" @on-cancel="cancel">
				是否删除{{deleteName}}?
			</Modal>
		</div>
		<Table :columns="columns" :data="tableData"></Table>
		<div class="center">
			<div class="pageBox">
				<Page :total="count" show-total :page-size="pageSize" @on-change="handlePage" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				// 表头
				columns: [{
						title: '版块id',
						key: 'id'
					},
					{
						title: '父项名称',
						key: 'name'
					},
					{
						title: '子项名称',
						key: 'itemName'
					},
					{
						title: '子项数值',
						key: 'itemValue'
					},
					{
						title: '序号',
						key: 'seq'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)
										}
									}
								}, '修改'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.row)
										}
									}
								}, '删除')
							])
						}
					}
				],
				// 表格数据
				tableData: [],
				// 总数
				count: 0,
				// 当前页
				page: 1,
				// 每页数量
				pageSize: 5,
				// 新增面板是否展示
				AddForumModal: false,
				// 父项名称
				name: '',
				// 父项名称列表
				nameList: ['版块', '文章大类', '文章小类'],
				// 子项名称
				itemName: '',
				// 子项数值
				itemValue: '',
				// 排序
				seq: '',
				// 修改面板是否展示
				editForumModal: false,
				// 父项名称（修改）
				editName: '',
				// 子项名称（修改）
				editItemName: '',
				// 子项数值（修改）
				editItemValue: '',
				// 排序（修改）
				editSeq: '',
				id: 0,
				deleteForumModal: false,
				deleteName: ''
			}
		},
		methods: {
			// 获取列表
			getList () {
				this.$api.get(0, '/art/v2/baseData/page?page=' + this.page + '&limit=' + this.pageSize, {}, r => {
					if (r.data.code === 0) {
						this.tableData = r.data.data.data
						this.count = r.data.data.total
					}
				})
			},
			// 分页操作
			handlePage (value) {
				this.page = value
				this.getList()
			},
			// 对话框退出时的操作
			cancel () {
				this.name = ''
				this.itemName = ''
				this.itemValue = ''
				this.seq = ''
				this.editName = ''
				this.editItemName = ''
				this.editItemValue = ''
				this.editSeq = ''
				this.id = 0
			},
			// 创建板块
			createForum () {
				this.$api.post(0, '/art/v2/baseData', {
					name: this.name,
					itemName: this.itemName,
					itemValue: this.itemValue,
					seq: this.seq
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('创建成功')
						this.getList()
					} else {
						this.$Message.error('创建失败')
					}
					this.cancel()
				})
			},
			// 点击‘修改’
			show (index) {
				this.editForumModal = true
				this.editName = index.name
				this.editItemName = index.itemName
				this.editItemValue = index.itemValue
				this.editSeq = index.seq
				this.id = index.id
			},
			// 点击‘删除’
			remove (index) {
				this.deleteForumModal = true
				this.id = index.id
				this.deleteName = index.name
			},
			// 修改版块
			editForum () {
				this.$api.put(0, '/art/v2/baseData', {
					id: this.id,
					name: this.editName,
					itemName: this.editItemName,
					itemValue: this.editItemValue,
					seq: this.editSeq
				}, r => {
					if (r.data.code === 0) {
						this.$Message.success('修改成功')
						this.getList()
					} else {
						this.$Message.error('修改失败')
					}
					this.cancel()
				})
			},
			// 删除版块
			deleteForum () {
				this.$api.delete(0, '/art/v2/baseData?id=' + this.id, {}, r => {
					if (r.data.code === 0) {
						this.$Message.success('删除成功')
						this.getList()
					} else {
						this.$Message.error('删除失败')
					}
					this.cancel()
				})
			}
		},
		mounted () {
			this.getList()
		}
	}
</script>

<style lang="less">
	div.dictionary {

		div.dicBtnGroup,
		.pageBox {
			margin: 20px 0;
		}
	}
</style>
